<template>
  <div id="every">
    <!-- <router-view /> -->
    <!-- 顶部导航栏 -->
    <van-nav-bar
      style="background:pink"
      title="奈雪的茶"
      left-text="注册"
      right-text="登录"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <!-- 轮播图 -->

    <div class="Mine-categories-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../assets/images/l1.jpg" alt="" />
        </van-swipe-item>

        <van-swipe-item>
          <img src="../assets/images/l2.jpg" alt="" />
        </van-swipe-item>

        <van-swipe-item>
          <img src="../assets/images/l3.jpg" alt="" />
        </van-swipe-item>

        <van-swipe-item>
          <img src="../assets/images/l4.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
   
  <!--  -->
  <van-notice-bar
  left-icon="volume-o"
  text="奶茶没有红酒的高贵，没有咖啡的摩登，也没有绿茶的精致，却有温润香浓的芬芳。"
/>
    <!-- 自取，外卖按钮 -->

    <van-grid icon-size="60px" square column-num="2">
      <van-grid-item icon="cart-o" text="现在下单" @click="fun"  />
      <van-grid-item icon="fire-o" text="热销" to="/uuu"/>
    </van-grid>

    <div class="mm" @click="fun">
      <button>立即下单</button>
      <van-icon name="shop-collect" color="pink" size="50" />
      <h5>
        产品介绍 <br />
        天然好材料 好喝更健康 <br />
        奈雪的茶坚持为现在人打造'一杯好茶'
      </h5>
    </div>

    <!-- 宫格图 -->

    <van-grid :gutter="10" icon-size="50px" column-num="3">
      <van-grid-item icon="shop-collect" text="商店" @click="fun" />
      <van-grid-item icon="hot-sale" text="热卖"  />
      <van-grid-item icon="new-arrival" text="新品"  />
    </van-grid>
    <div class="bb" @click="fun">
      <button>一起喝</button>
      <van-icon name="award" color="pansy" size="50px" />
      <van-icon name="like-o" class="j" size="30px" />
      <van-icon name="like-o" class="h" size="30px" />
      <h5>
        开春季 <br />
        春意暖暖 <br />
        杯杯心意
      </h5>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
  props:["active"],
  data() {
    return {
      selected: this.$route.path.split("/").pop(),
    };
  },

  activated() {
    this.selected = this.$route.path.split("/").pop();
  },

  methods: {
    fun(){
      this.$emit("cc",1)
      this.$router.push("/uuu");
      // this.func();
      // console.log(this.active);

    //   this.$router.push("/diancan");
    //  this.active=1

    },
    // ondc(){
    //    this.$emit("aa",1)
    //   this.$router.push("/diancan");
    // },
    clickTab(path) {
      // this.selected = path;
      let currentPath = this.$route.path.split("/").pop();
      if (path != currentPath) {
        this.$router.push(path);
      }
    },
    onClickLeft() {
      this.$router.push({ name: "Zhuce" });
    },
    onClickRight() {
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
  width: 100%;
  height: 250px;
}
.Mine-categories-swipe img {
  display: inline-block;
  width: 100%;
  height: 250px;
}

.btn .button {
  display: inline-block;
}

.van-grid .van-grid-item {
  //   margin-top: 25px;
  color: aquamarine;
}
.r {
  display: inline-block;
  margin-top: 30px;
}
.tabsnav {
  background-color: #f5f5f5;
  line-height: 2rem;
}

.img {
  margin-bottom: 50px;
}
.mm {
  background-color: rgb(253, 251, 241);
  height: 70px;
  margin-bottom: 10px;
  button {
    border: none;
    position: absolute;
    right: 5px;
    margin-top: 30px;
    font-weight: bold;
    border-radius: 20px;
    color: #39a9ed;
    background-color: beige;
  }
  .van-icon {
    position: absolute;
    left: 250px;
    margin-top:7px;
  }
  h5 {
    margin-right: 20px;
    font-size: 13px;
    color: grey;
    //  font-style: oblique;
    font-weight: bold;
  }
}

.bb {
  height: 140px;
  background-color: beige;
  margin-top: 10px;
  button {
    border: none;
    position: absolute;
    right: 2px;
    margin-top: 60px;
    border-radius: 15px;
    border: 1px solid gainsboro;
    font-weight: bold;

    color: #39a9ed;
    background-color: rgb(253, 251, 241);
  }
  .van-icon {
    position: absolute;
    right: 28px;
    color: pink;
  }
  .j {
    margin-right: 100px;
    margin-top: 50px;
  }
  .h {
    margin-right: 150px;
    margin-top: 50px;
  }
  h5 {
    //    padding-bottom: 15px;
    //    padding-top: 20px;
    margin-right: 155px;
    font-weight: bold;
    font-size: 20px;
    color: grey;
  }
}
</style>
